.prg-bar {
  overflow: hidden;

  .prg-bar-bg,
  .prg-bar-done,
  .prg-bar-text {
    .border-radius(2px);
    font-size: 12px;
    text-align: center;
  }

  .prg-bar-bg {
    border: 1px solid @splitLineColor;
    color: @activeColor;
    height: @progressbarHeight - 2px;
    line-height: @progressbarHeight - 2px;
  }

  .prg-bar-inner {
    margin-top: 0 - @progressbarHeight;
    height: @progressbarHeight;
    line-height: @progressbarHeight;
    width: 100%;
    overflow: hidden;
  }

  .prg-bar-done {
    background-color: @activeColor;
    height: @progressbarHeight;
  }

  .prg-bar-text {
    margin-top: 0 - @progressbarHeight;
    width: 100%;
    color: #fff;
  }
}

.prg-bar-inline {
  display: inline-block;
  width: 200px;
}

.prg-bar-gray {
  .prg-bar-bg {
    color: @grayLight;
  }

  .prg-bar-done{
    background-color: @grayLight;
  }
}

.prg-bar-warning {
  .prg-bar-bg {
    color: @warningColor;
  }

  .prg-bar-done{
    background-color: @warningColor;
  }
}

.prg-bar-danger {
  .prg-bar-bg {
    color: @dangerColor;
  }

  .prg-bar-done{
    background-color: @dangerColor;
  }
}
